<template>
  <div class="w-full h-full p-[15px]">
    <div
      class="w-full h-full border border-[#4c4d4f] border-solid rounded p-3 bg-[#252931]"
    >
      <div
        class="h-7 w-[fit-content] text-[0.8vw] text-[--them-color] font-bold relative"
      >
        所有订单
        <div
          class="absolute h-[1px] w-[50%] bottom-0 left-[50%] translate-x-[-50%] bg-[--them-color]"
        ></div>
      </div>
      <div
        class="h-[150px] w-full grid grid-cols-3 justify-items-center items-center gap-5 mt-4"
      >
        <div
          class="flex gap-6 w-full h-[fit-content] p-1 rounded items-center text-[12px]"
        >
          <div class="text-[#fff] w-[fit-content]">订单号</div>
          <input
            type="text"
            placeholder="请输入订单号"
            v-model="seachbox.orderid"
            class="h-[40px] bg-[transparent] flex-1 p-2 outline-none rounded text-[#fff] border border-solid border-[#4c4d4f]"
          />
        </div>
        <div
          class="flex gap-6 w-full h-[fit-content] p-1 rounded items-center text-[12px]"
        >
          <div class="text-[#fff] w-[fit-content]">商品id</div>
          <input
            type="text"
            placeholder="请输入商品id"
            v-model="seachbox.productid"
            class="h-[40px] bg-[transparent] flex-1 p-2 outline-none rounded text-[#fff] border border-solid border-[#4c4d4f]"
          />
        </div>
        <div
          class="flex gap-6 w-full h-[fit-content] p-1 rounded items-center text-[12px]"
        >
          <div class="text-[#fff] w-[fit-content]">用户id</div>
          <input
            type="text"
            placeholder="请输入用户id"
            v-model="seachbox.userid"
            class="h-[40px] bg-[transparent] flex-1 p-2 outline-none rounded text-[#fff] border border-solid border-[#4c4d4f]"
          />
        </div>
        <div
          class="flex gap-6 w-full h-[fit-content] p-1 rounded items-center text-[12px]"
        >
          <div class="text-[#fff] w-[fit-content]">入时间</div>
          <input
            type="date"
            placeholder="请输入时间段"
            v-model="seachbox.createdAt"
            class="h-[40px] bg-[transparent] flex-1 p-2 outline-none rounded text-[#fff] border border-solid border-[#4c4d4f]"
          />
        </div>
      </div>
      <el-button class="ml-5 my-2" @click="seachgo">确定</el-button>
      <div
        class="w-full h-[22vw] border border-[#4c4d4f] border-solid rounded p-3 mt-[10px]"
      >
        <el-table :data="orderdata" class="w-full !h-full !text-[0.65vw]">
          <el-table-column align="center" prop="orderid" label="订单编号" />
          <el-table-column align="center" prop="userid" label="用户id" />
          <el-table-column align="center" prop="productid" label="商品id" />
          <el-table-column align="center" prop="sum" label="数量" />
          <el-table-column align="center" prop="allprice" label="价格" />
          <el-table-column align="center" prop="createdAt" label="时间" />
          <el-table-column align="center" label="操作">
            <template #="{ row }">
              <el-popconfirm title="确定删除?" @confirm="dele(row)">
                <template #reference>
                  <el-button
                    :icon="Delete"
                    type="danger"
                    size="small"
                  ></el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Delete } from "@element-plus/icons-vue";
import { ref, onMounted } from "vue";
import { getorderdata, seahorderorderdata, delorders } from "@/api/index";
import type { getorderrudata, seachboxtype } from "./type";
import { ElMessage } from "element-plus";
const orderdata = ref<getorderrudata[]>([]);
const seachbox = ref<seachboxtype>({
  orderid: "",
  userid: "",
  productid: "",
  createdAt: "",
});
onMounted(() => {
  getdata();
});
const getdata = async () => {
  const res = await getorderdata();
  if (res.code == 200) {
    orderdata.value = res.data;
    console.log(orderdata.value);
  }
};
const seachgo = async (): Promise<any> => {
  // const isok = Object.values(seachbox.value).every((item) => item == "");
  // if (isok) {
  //   ElMessage({
  //     message: "请输入完整信息",
  //     type: "warning",
  //   });
  //   return;
  // }
  const rudata = await seahorderorderdata(seachbox.value);
  if (rudata.code == 200) {
    orderdata.value = rudata.data;
    console.log(rudata.data);
  }
};
const dele = async (e: getorderrudata) => {
  console.log(e.id);
  const rudata = await delorders(e.id);
  if (rudata.code == 200) {
    getdata();
    ElMessage({
      message: "删除成功",
      type: "success",
    });
  }
};
</script>
<style scoped></style>
